<template>
  <div>
    <!-- 添加返回按钮 -->
    <button class="back-button" @click="goBack">《返回</button>

    <!-- 添加vant2的coupon-list组件 -->
    <van-coupon-list
      :coupons="coupons"
      @change="onCouponChange"
      v-model="chosenCoupon"
    ></van-coupon-list>
  </div>
</template>

<script>
// 引入vant2的CouponList组件
import { CouponList } from "vant";

export default {
  name: "CouponsForm",
  components: {
    "van-coupon-list": CouponList, // 正确注册CouponList组件
  },
  data() {
    return {
      coupons: [
        // 示例优惠券数据
        {
          id: 1,
          name: "优惠券1",
          conditions: "无门槛",
          startAt: null,
          endAt: null,
          description: "描述信息",
          value: 50,
          reason: " ",
          status: "usable",
        },
        // 更多优惠券数据...
      ],
      chosenCoupon: null, // 选中的优惠券
    };
  },
  methods: {
    // 添加返回功能的方法
    goBack() {
      window.history.back(); // 使用浏览器的历史记录返回上一页
    },
    // 优惠券选择变化时的处理函数
    onCouponChange(index) {
      this.chosenCoupon = this.coupons[index];
      console.log("选中的优惠券", this.chosenCoupon);
      // 在这里可以添加更多处理逻辑，比如更新订单总价等
    },
  },
};
</script>

<style scoped>
.coupon-form-container {
  position: relative; /* 添加定位 */
  width: 100%; /* 确保有足够的宽度 */
  height: 100vh; /* 或者设置一个足够的高度 */
}
.back-button {
  position: relative; /* 使用相对定位 */
  z-index: 10; /* 提高z-index以确保按钮在其他内容之上 */
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 20px; /* 为按钮下方添加间距 */
  background-color: #c0e0f8; /* 设置按钮背景色为浅蓝色 */
  color: #5e5e5e; /* 设置按钮文字颜色为白色 */
  border: none; /* 去除按钮边框 */
  border-radius: 4px; /* 添加按钮圆角边框 */
  padding: 8px 16px; /* 设置按钮内边距 */
  cursor: pointer; /* 设置鼠标悬停时显示为手形指针 */
}
</style>
